<!-- eslint-disable-next-line vue/html-self-closing -->
<template>
  <div class="face_content">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="face_left">
          <div class="face_img_box" v-show="uploadType == '3' && !formData.afterPicUrl">
            <!-- <TakePhotos ref="takePhotoRef" v-model="formData.afterPicUrl"></TakePhotos> -->
            <canvas style="display: none; width: 543px; height: 500px" ref="canvasDom"></canvas>
            <!-- 播放器，用来播放拍摄的视频 -->
            <video v-if="!formData.afterPicUrl" class="camera_video" ref="videoDom"></video>
            <div class="divider"></div>
            <br />
          </div>
          <div class="face_img_box" v-show="!(uploadType == '3' && !formData.afterPicUrl)">
            <template v-if="formData.afterPicUrl">
              <ImgComparisonSlider>
                <img slot="first" class="upload-image_after" :src="formData.afterPicUrl" />
                <img slot="second" class="upload-image_before" :src="formData.beforePicUrl
                  ? 'data:image/jpeg;base64,' + formData.beforePicUrl
                  : formData.afterPicUrl
                  " />
              </ImgComparisonSlider>
            </template>
            <template v-else>
              <img class="upload-image_after" :src="defaultImg" />
            </template>
          </div>
          <div class="face_select_box">
            <div class="select_box">
              <el-button class="option_btn" :class="{
                'custom-btn': currentActiveId !== item.id,
                'el-button--primary': currentActiveId === item.id,
              }" @click="handleButtonClick(item)" v-for="(item, index) in selectList" :key="index">{{ item.label
              }}</el-button>
            </div>
          </div>
          <div class="face_upload_box">
            <div class="select_btn">
              <el-select v-model="uploadType" class="!w-240px" clearable placeholder="请选择图片上传方式"
                @change="changeUploadType">
                <el-option v-for="dict in uploadTypes" :key="dict.id" :label="dict.label" :value="dict.id"></el-option>
              </el-select>
              <div v-if="uploadType != ''" class="submit_btn_box">
                <el-button v-if="uploadType == '3'" type="info" @click="takePhoto">{{
                  formData.afterPicUrl ? "重拍" : "拍照"
                }}</el-button>
                <el-button type="primary" style="margin-left: 20px" @click="fetchData()">生成</el-button>
              </div>
            </div>
            <UploadImg v-if="uploadType == '1'" v-model="formData.afterPicUrl" height="80px"></UploadImg>
            <el-input v-if="uploadType == '2'" v-model="formData.afterPicUrl" placeholder="请输入图片URL"></el-input>
          </div>
          <div class="face_left_tip">*请上传一张图片体验皮肤分析功能。</div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="face_right">
          <div class="face_right_content">
            <div class="container">
              <div class="report-content">
                <div class="row">
                  <span class="label">肌龄</span>
                  <span class="value blue">{{ resultData.result?.skin_age.value || "00" }}岁</span>
                </div>
                <div class="row">
                  <span class="label">总体分数</span>
                  <span class="value blue">{{
                    resultData.result?.score_info.total_score || "00"
                  }}</span>
                </div>

                <div class="section-title">肤质分析</div>
                <div class="row">
                  <span class="label">肤质分类</span>
                  <span class="value blue">{{
                    skin_type[resultData.result?.skin_type.skin_type]
                  }}</span>
                </div>
                <div class="row">
                  <span class="label">油光分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.oily_intensity_score || "00"
                  }}<img class="icon" :src="imgUrl" alt="icon" @click="
                      handleButtonClick({
                        id: 7,
                        label: '油光图',
                        type: 'texture_enhanced_oily_area',
                      })
                      " />
                  </span>
                </div>

                <div class="sub-section">全脸</div>
                <div class="row padding_20">
                  <span class="sub-label">出油严重程度</span>
                  <span class="value blue">{{
                    oily_intensity[resultData.result?.oily_intensity.full_face.intensity]
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">面积占比</span>
                  <span class="value blue">{{
                    (
                      resultData.result?.oily_intensity.full_face.area * 100 || 0
                    ).toFixed(2)
                  }}%</span>
                </div>

                <div class="sub-section">额头</div>
                <div class="row padding_20">
                  <span class="sub-label">出油严重程度</span>
                  <span class="value blue">{{
                    oily_intensity[resultData.result?.oily_intensity.t_zone.intensity]
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">面积占比</span>
                  <span class="value blue">{{
                    (resultData.result?.oily_intensity.t_zone.area * 100 || 0).toFixed(
                      2
                    )
                  }}%</span>
                </div>

                <div class="sub-section">左脸颊</div>
                <div class="row padding_20">
                  <span class="sub-label">出油严重程度</span>
                  <span class="value blue">{{
                    oily_intensity[resultData.result?.oily_intensity.left_cheek.intensity]
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">面积占比</span>
                  <span class="value blue">{{
                    (
                      resultData.result?.oily_intensity.left_cheek.area * 100 || 0
                    ).toFixed(2)
                  }}%</span>
                </div>

                <div class="sub-section">右脸颊</div>
                <div class="row padding_20">
                  <span class="sub-label">出油严重程度</span>
                  <span class="value blue">{{
                    oily_intensity[
                    resultData.result?.oily_intensity.right_cheek.intensity
                    ]
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">面积占比</span>
                  <span class="value blue">{{
                    (
                      resultData.result?.oily_intensity.right_cheek.area * 100 || 0
                    ).toFixed(2)
                  }}%</span>
                </div>

                <div class="sub-section">下巴</div>
                <div class="row padding_20">
                  <span class="sub-label">出油严重程度</span>
                  <span class="value blue">{{
                    oily_intensity[resultData.result?.oily_intensity.chin_area.intensity]
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">面积占比</span>
                  <span class="value blue">{{
                    (
                      resultData.result?.oily_intensity.chin_area.area * 100 || 0
                    ).toFixed(2)
                  }}%</span>
                </div>

                <div class="row">
                  <span class="label">水分分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.water_score || "00"
                  }}<img class="icon" :src="imgUrl" @click="
                      handleButtonClick({ id: 5, label: '水分图', type: 'water_area' })
                      " alt="icon" />
                  </span>
                </div>
                <div class="row">
                  <span class="label">缺水严重程度</span>
                  <span class="value blue">中度</span>
                </div>
                <div class="row">
                  <span class="label">缺水面积占比</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">全脸</span>
                  <span class="value blue">{{
                    (resultData.result?.water.water_area * 100 || 0).toFixed(2)
                  }}%</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">额头</span>
                  <span class="value blue">{{
                    (resultData.result?.water.water_forehead.area * 100 || 0).toFixed(
                      2
                    )
                  }}%</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">左脸颊</span>
                  <span class="value blue">{{
                    (resultData.result?.water.water_leftcheek.area * 100 || 0).toFixed(
                      2
                    )
                  }}%</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">右脸颊</span>
                  <span class="value blue">{{
                    (resultData.result?.water.water_rightcheek.area * 100 || 0).toFixed(
                      2
                    )
                  }}%</span>
                </div>

                <div class="section-title">肤色分析</div>
                <div class="row">
                  <span class="label">东亚肤色分类</span>
                  <span class="value blue">{{ eastAsianSkinTone[resultData.result?.skintone.value] || '未检测'
                  }}</span>
                </div>
                <div class="row">
                  <span class="label">ITA肤色分型</span>
                  <span class="value blue">{{
                    itaSkinType[resultData.result?.skintone_ita.skintone] || 'very light' }}</span>
                </div>
                <div class="row">
                  <span class="label">HA肤色色调分型</span>
                  <span class="value blue">{{ resultData.result?.skin_hue_ha.skin_hue || '1' }} - {{
                    haSkinTone[resultData.result?.skin_hue_ha.skin_hue] || '中性' }}</span>
                </div>

                <div class="section-title">粗糙度分析</div>
                <div class="row">
                  <span class="label">黑头分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.blackhead_score || '00' }}<img class="icon"
                      :src="imgUrl"
                      @click="handleButtonClick({ id: 6, label: '黑头圈', type: 'texture_enhanced_blackheads' })"
                      alt="icon" /></span>
                </div>
                <div class="row">
                  <span class="label">黑头严重程度</span>
                  <span class="value blue">{{ blackheadSeverity[resultData.result?.blackhead.value] ||
                    '未检测'
                  }}</span>
                </div>
                <div class="row">
                  <span class="label">黑头个数</span>
                  <span class="value blue">{{ resultData.result?.blackhead_count || '0' }}个</span>
                </div>
                <div class="row">
                  <span class="label">毛孔分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.pores_score || '00' }}<img class="icon"
                      :src="imgUrl" @click="handleButtonClick({ id: 4, label: '毛孔图', type: 'texture_enhanced_pores' })"
                      alt="icon" /></span>
                </div>

                <div class="row padding_20">
                  <span class="sub-label">毛孔分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.pores_type_score.pores_forehead_score || '0'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ poreSeverity[resultData.result?.pores_forehead.value] || '未检测'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">粗大毛孔数</span>
                  <span class="value blue">{{ resultData.result?.enlarged_pore_count.forehead_count || '0' }}</span>
                </div>

                <div class="sub-section">左脸颊</div>
                <div class="row padding_20">
                  <span class="sub-label">毛孔分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.pores_type_score.pores_leftcheek_score ||
                    '0'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ poreSeverity[resultData.result?.pores_left_cheek.value] ||
                    '未检测'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">粗大毛孔数</span>
                  <span class="value blue">{{ resultData.result?.enlarged_pore_count.left_cheek_count || '0' }}</span>
                </div>

                <div class="sub-section">右脸颊</div>
                <div class="row padding_20">
                  <span class="sub-label">毛孔分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.pores_type_score.pores_rightcheek_score ||
                    '0'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ poreSeverity[resultData.result?.pores_right_cheek.value] ||
                    '未检测'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">粗大毛孔数</span>
                  <span class="value blue">{{ resultData.result?.enlarged_pore_count.right_cheek_count || '0' }}</span>
                </div>

                <div class="sub-section">下巴</div>
                <div class="row padding_20">
                  <span class="sub-label">毛孔分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.pores_type_score.pores_jaw_score || '0'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ poreSeverity[resultData.result?.pores_jaw.value] || '未检测'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">粗大毛孔数</span>
                  <span class="value blue">{{ resultData.result?.enlarged_pore_count.chin_count || '0' }}</span>
                </div>

                <div class="row">
                  <span class="label">粗糙分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.rough_score || '00' }}</span>
                </div>
                <div class="row">
                  <span class="label">粗糙严重程度</span>
                  <span class="value blue">{{ roughnessSeverity[resultData.result?.rough.rough_severity] || '未检测'
                  }}</span>
                </div>
                <div class="row">
                  <span class="label">整体面部粗糙面积占比</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">额头粗糙面积占比</span>
                  <span class="value blue">{{ (resultData.result?.rough.rough_forehead.area * 100 || 0).toFixed(2)
                  }}%</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">左脸颊粗糙面积占比</span>
                  <span class="value blue">{{ (resultData.result?.rough.rough_leftcheek.area * 100 || 0).toFixed(2)
                  }}%</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">右脸颊粗糙面积占比</span>
                  <span class="value blue">{{ (resultData.result?.rough.rough_rightcheek.area * 100 || 0).toFixed(2)
                  }}%</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">下巴粗糙面积占比</span>
                  <span class="value blue">{{ (resultData.result?.rough.rough_jaw.area * 100 || 0).toFixed(2)
                  }}%</span>
                </div>

                <div class="section-title">色素沉着</div>
                <div class="row">
                  <span class="label">色沉分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.melanin_score || '00' }}<img class="icon"
                      :src="imgUrl" @click="handleButtonClick({ id: 3, label: '色沉图', type: 'brown_area' })"
                      alt="icon" /></span>
                </div>
                <div class="row">
                  <span class="label">色沉严重程度</span>
                  <span class="value blue">{{ resultData.result?.melanin.melanin_concentration || '未检测'
                  }}</span>
                </div>
                <div class="row">
                  <span class="label">色素沉着区域占全脸面积比</span>
                  <span class="value blue">{{ (resultData.result?.melanin.brown_area * 100 || 0).toFixed(2)
                  }}%</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">额头色素沉着面积占比</span>
                  <span class="value blue">{{ (resultData.result?.melanin.brown_forehead * 100 || 0).toFixed(2)
                  }}%</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">左脸颊色素沉着面积占比</span>
                  <span class="value blue">{{ (resultData.result?.melanin.brown_leftcheek * 100 || 0).toFixed(2)
                  }}%</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">右脸颊色素沉着面积占比</span>
                  <span class="value blue">{{ (resultData.result?.melanin.brown_rightcheek * 100 || 0).toFixed(2)
                  }}%</span>
                </div>

                <div class="section-title">痤疮分析</div>
                <div class="row">
                  <span class="label">痘痘分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.acne_score || '00' }}<img class="icon"
                      :src="imgUrl" @click="handleButtonClick({ id: 9, label: '痤疮', type: 'roi_outline_map' })"
                      alt="icon" /></span>
                </div>
                <div class="section-title">敏感性分析</div>
                <div class="row">
                  <span class="label">敏感性分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.sensitivity_score || '00' }}<img
                      class="icon" :src="imgUrl" @click="handleButtonClick({ id: 2, label: '红区图', type: 'red_area' })"
                      alt="icon" /></span>
                </div>
                <div class="row">
                  <span class="label">敏感严重程度</span>
                  <span class="value blue">{{ resultData.result?.sensitivity_intensity ||
                    '未检测'
                  }}</span>
                </div>
                <div class="row">
                  <span class="label">敏感区域全脸面积占比</span>
                  <span class="value blue">{{ (resultData.result?.sensitivity.sensitivity_area * 100 || 0).toFixed(2)
                  }}%</span>
                </div>

                <div class="section-title">衰老性分析</div>
                <div class="row">
                  <span class="label">皱纹分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.wrinkle_score || '00' }}<img class="icon"
                      :src="imgUrl" @click="handleButtonClick({ id: 8, label: '皱纹图', type: 'texture_enhanced_lines' })"
                      alt="icon" /></span>
                </div>

                <div class="sub-section">抬头纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.forehead_wrinkle_info.wrinkle_score || '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.forehead_wrinkle.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">细纹数量/深纹数量</span>
                  <span class="value blue">{{ resultData.result?.fine_line.forehead_count || 0 }}/{{
                    resultData.result?.wrinkle_count.forehead_count || 0 }}</span>
                </div>

                <div class="sub-section">左眼纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.left_eye_wrinkle_info.wrinkle_score || '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.left_eye_finelines_severity.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">细纹数量/深纹数量</span>
                  <span class="value blue">{{ resultData.result?.fine_line.left_undereye_count || 0 }}/{{
                    resultData.result?.wrinkle_count.left_undereye_count || 0 }}</span>
                </div>

                <div class="sub-section">右眼纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.right_eye_wrinkle_info.wrinkle_score || '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.right_eye_finelines_severity.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">细纹数量/深纹数量</span>
                  <span class="value blue">{{ resultData.result?.fine_line.right_undereye_count || 0 }}/{{
                    resultData.result?.wrinkle_count.right_undereye_count || 0 }}</span>
                </div>

                <div class="sub-section">左鱼尾纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.left_crowsfeet_wrinkle_info.wrinkle_score || '0'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.left_crows_feet_severity.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">细纹数量/深纹数量</span>
                  <span class="value blue">{{ resultData.result?.fine_line.left_crowsfeet_count || 0 }}/{{
                    resultData.result?.wrinkle_count.left_crowsfeet_count || 0 }}</span>
                </div>

                <div class="sub-section">右鱼尾纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.right_crowsfeet_wrinkle_info.wrinkle_score || '0'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.right_crows_feet_severity.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">细纹数量/深纹数量</span>
                  <span class="value blue">{{ resultData.result?.fine_line.right_crowsfeet_count || 0 }}/{{
                    resultData.result?.wrinkle_count.right_crowsfeet_count || 0 }}</span>
                </div>

                <div class="sub-section">眉间纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.glabella_wrinkle_info.wrinkle_score || '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.glabella_wrinkle_severity.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">细纹数量/深纹数量</span>
                  <span class="value blue">{{ resultData.result?.fine_line.glabella_count || 0 }}/{{
                    resultData.result?.wrinkle_count.glabella_count || 0 }}</span>
                </div>
                <div class="sub-section">左嘴角纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.left_mouth_wrinkle_info.wrinkle_score || '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.left_mouth_wrinkle_severity.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">深纹数量</span>
                  <span class="value blue">{{
                    resultData.result?.wrinkle_count.left_mouth_count || 0 }}</span>
                </div>
                <div class="sub-section">右嘴角纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.right_mouth_wrinkle_info.wrinkle_score || '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.right_mouth_wrinkle_severity.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">深纹数量</span>
                  <span class="value blue">{{
                    resultData.result?.wrinkle_count.right_mouth_count || 0 }}</span>
                </div>

                <div class="sub-section">左法令纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.left_nasolabial_wrinkle_info.wrinkle_score || '0'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.left_nasolabial_fold_severity.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">深纹数量</span>
                  <span class="value blue">{{
                    resultData.result?.wrinkle_count.left_nasolabial_count || 0 }}</span>
                </div>

                <div class="sub-section">右法令纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.right_nasolabial_wrinkle_info.wrinkle_score || '0'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.right_nasolabial_fold_severity.value]
                    ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">深纹数量</span>
                  <span class="value blue">{{
                    resultData.result?.wrinkle_count.right_nasolabial_count || 0 }}</span>
                </div>

                <div class="sub-section">左脸皱纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.left_cheek_wrinkle_info.wrinkle_score || '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.left_cheek_wrinkle_severity.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">细纹数量/深纹数量</span>
                  <span class="value blue">{{ resultData.result?.fine_line.left_cheek_count || 0 }}/{{
                    resultData.result?.wrinkle_count.left_cheek_count || 0 }}</span>
                </div>

                <div class="sub-section">右脸皱纹</div>
                <div class="row padding_20">
                  <span class="sub-label">分数</span>
                  <span class="value blue">{{ resultData.result?.right_cheek_wrinkle_info.wrinkle_score || '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">严重程度</span>
                  <span class="value blue">{{ wrinkleSeverity[resultData.result?.right_cheek_wrinkle_severity.value] ||
                    '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">细纹数量/深纹数量</span>
                  <span class="value blue">{{ resultData.result?.fine_line.right_cheek_count || 0 }}/{{
                    resultData.result?.wrinkle_count.right_cheek_count || 0 }}</span>
                </div>



                <div class="section-title">眼部分析</div>
                <div class="row padding_20">
                  <span class="sub-label">眼袋检测</span>
                  <span class="value blue">{{ eye_pouch[resultData.result?.eye_pouch.value] || '无' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">黑眼圈分数</span>
                  <span class="value blue">{{ resultData.result?.score_info.dark_circle_score || '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">左眼黑眼圈分数</span>
                  <span class="value blue">{{
                    resultData.result?.score_info.dark_circle_type_score.left_dark_circle_score ||
                    '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">右眼黑眼圈分数</span>
                  <span class="value blue">{{
                    resultData.result?.score_info.dark_circle_type_score.right_dark_circle_score ||
                    '0' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">黑眼圈类型检测</span>
                  <span class="value blue">{{ darkCircleType[resultData.result?.dark_circle.value] || '无' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">黑眼圈严重程度</span>
                  <span class="value blue">{{ darkCircleSeverity[resultData.result?.dark_circle_severity.value] || '-'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">左眼血管型黑眼圈严重程度</span>
                  <span class="value blue">{{
                    darkCircleVascularSeverity[resultData.result?.left_dark_circle_rete.value] || '无' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">右眼血管型黑眼圈严重程度</span>
                  <span class="value blue">{{
                    darkCircleVascularSeverity[resultData.result?.right_dark_circle_rete.value] || '无' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">左眼色素型黑眼圈严重程度</span>
                  <span class="value blue">{{
                    darkCirclePigmentSeverity[resultData.result?.left_dark_circle_pigment.value]
                    || '无' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">右眼色素型黑眼圈严重程度</span>
                  <span class="value blue">{{
                    darkCirclePigmentSeverity[resultData.result?.right_dark_circle_pigment.value]
                    || '无' }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">左眼结构型黑眼圈严重程度</span>
                  <span class="value blue">{{
                    darkCircleStructuralSeverity[resultData.result?.left_dark_circle_structural.value] || '无'
                  }}</span>
                </div>
                <div class="row padding_20">
                  <span class="sub-label">右眼结构型黑眼圈严重程度</span>
                  <span class="value blue">{{
                    darkCircleStructuralSeverity[resultData.result?.right_dark_circle_structural.value] || '无'
                  }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="face_right_tips">
            *建议您上传高清、正脸拍摄的照片，并保证光线充足，采用手机前置或后置摄像头开启闪光灯补光拍摄为佳
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts" name="">
  const { userId } = defineProps({
    userId: {
      type: Number,
      required: true,
    },
  });
  import { useUpload } from "@/components/UploadFile/src/useUpload";
  import { UploadRequestOptions } from "element-plus/es/components/upload/src/upload";

  import { FaceanalyseRequestApi } from "@/api/project/face/faceanalyserequest";

  import { ImgComparisonSlider } from "@img-comparison-slider/vue";
  const uploadTypes = [
    { id: 1, label: "本地上传" },
    { id: 2, label: "URL上传" },
    { id: 3, label: "拍照上传" },
  ];
  const uploadType = ref("");
  const imgUrl = ref(
    ""
  );
  const defaultImg =
    "https://cdn.faceplusplus.com.cn/mc-official/demo/images/demo-pic-skinAnalysis-1.jpg";
  const selectList = [
    { id: 1, label: "原图", type: "" },
    { id: 2, label: "红区图", type: "red_area" },
    { id: 3, label: "色沉图", type: "brown_area" },
    { id: 4, label: "毛孔图", type: "texture_enhanced_pores" },
    { id: 5, label: "水分图", type: "water_area" },
    { id: 6, label: "黑头圈", type: "texture_enhanced_blackheads" },
    { id: 7, label: "油光图", type: "texture_enhanced_oily_area" },
    { id: 8, label: "皱纹图", type: "texture_enhanced_lines" },
    { id: 9, label: "痤疮", type: "roi_outline_map" },
    { id: 10, label: "闭口粉刺", type: "acne" },
    { id: 11, label: "色斑", type: "acne" },
    { id: 12, label: "痣", type: "acne" },
  ];
  const skin_type = ["油性皮肤", "干性皮肤", "中性皮肤", "混合型皮肤"];
  const oily_intensity = ["没有油光或轻微泛油光", "中度油光现象", "出油严重"];
  const eastAsianSkinTone = ["透白", "白皙", "自然", "小麦", "黝黑 / 古铜"];
  const itaSkinType = ["very light", "light", "intermediate", "tan", "brown", "dark"];
  const haSkinTone = ["偏黄", "中性", "偏红", "异常的色调值"];
  const blackheadSeverity = ["无黑头", "轻度", "中度", "重度"];
  const poreSeverity = ["无毛孔", "轻度", "中度", "重度"];
  const roughnessSeverity = ["无", "轻度", "中度", "重度"];
  const wrinkleSeverity = ["无", "轻度", "中度", "重度"];
  const eye_pouch = ["无眼袋", "有眼袋"];
  const darkCircleType = ["无黑眼圈", "色素型黑眼圈", "血管型黑眼圈", "阴影型黑眼圈"];
  const darkCircleSeverity = ["轻度黑眼圈", "中度黑眼圈", "重度黑眼圈"];
  const darkCircleVascularSeverity = ["无血管型黑眼圈", "轻度血管型黑眼圈", "中度血管型黑眼圈", "重度血管型黑眼圈"];
  const darkCirclePigmentSeverity = ["无色素型黑眼圈", "轻度色素型黑眼圈", "中度色素型黑眼圈", "重度色素型黑眼圈"];
  const darkCircleStructuralSeverity = ["无结构型黑眼圈", "轻度结构型黑眼圈", "中度结构型黑眼圈", "重度结构型黑眼圈"];
  const resultData = reactive({
    result: undefined,
  });
  const formData = reactive({
    afterPicUrl: "", // 修改前封面图
    beforePicUrl: "", // 修改后封面图
  });
  const message = useMessage();
  // 用于存储当前激活按钮的 id
  const currentActiveId = ref(1);

  const handleButtonClick = (item) => {
    if (!formData.afterPicUrl) return message.error("请先上传照片！");
    // 更新当前激活按钮的 id
    currentActiveId.value = item.id;

    formData.beforePicUrl = resultData.result?.face_maps[item.type];
    console.log(resultData);
  };
  const changeUploadType = (val) => {
    if (!val) formData.afterPicUrl = "";
  };
  const fetchData = async () => {
    const data = {
      userId: userId * 1,
      apiKey: "cHEsDpczNRyux9Kbok4g9pCXhWHolQgc",
      apiSecret: "sAnOmX0mA7pkIxVvU80C3-7DBRxCle63",
      imageUrl: formData.afterPicUrl,
      returnMaps:
        "red_area,brown_area,texture_enhanced_pores,water_area,texture_enhanced_blackheads,texture_enhanced_oily_area,texture_enhanced_lines,roi_outline_map",
    };
    const resultJsonData = await FaceanalyseRequestApi.createFaceanalyseRequest(data);
    if (resultJsonData.result) {
      localStorage.setItem("faceResult", resultJsonData.result);
      resultData.result = JSON.parse(resultJsonData.result);
      console.log(resultData.result);
      message.success("生成成功");
    } else {
      message.error("生成失败，请重新选择照片生成！");
    }
  };
  //拍照

  // canvas 控件对象
  const canvasDom = ref(null);
  // video 控件对象
  const videoDom = ref(null);
  // 照片路径
  const imgurl = ref(null);

  const openCamera = () => {
    // 检测浏览器是否支持 mediaDevices
    if (navigator.mediaDevices) {
      navigator.mediaDevices
        // 开启视频，关闭音频
        .getUserMedia({
          audio: false,
          video: {
            width: { ideal: 543 }, // 期望宽度
            height: { ideal: 500 }, // 期望高度
          },
        })
        .then((stream) => {
          // 将视频流传入 viedo 控件
          videoDom.value.srcObject = stream;
          // 播放
          videoDom.value.play();
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      window.alert("该浏览器不支持开启摄像头，请更换最新版浏览器");
    }
  };

  // 将 base64 转换为 Blob 对象
  const base64ToBlob = (base64) => {
    // 强制设置 content type 为 image/png
    const contentType = "image/png";
    const parts = base64.split(";base64,");
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], { type: contentType });
  };

  // 上传图片到服务器
  const uploadImage = async (base64) => {
    const blob = base64ToBlob(base64);
    const formData = new FormData();
    formData.append("image", blob, "photo.jpg");
    try {
      const { httpRequest } = useUpload();
      const photo = (((await httpRequest({
        file: blob,
        filename: "photo.png",
      } as UploadRequestOptions)) as unknown) as { data: string }).data;
      return photo;
    } catch (error) {
      console.error("拍照失败:", error);
      return null;
    }
  };

  // 拍照
  const takePhoto = async () => {
    // 如果已经拍照了就重新启动摄像头
    if (formData.afterPicUrl) {
      formData.afterPicUrl = null;
      openCamera();
      return;
    }
    canvasDom.value.width = videoDom.value.videoWidth;
    canvasDom.value.height = videoDom.value.videoHeight;

    // 执行画的操作
    canvasDom.value.getContext("2d").drawImage(videoDom.value, 0, 0);
    // 将结果转换为可展示的格式
    const base64Img = canvasDom.value.toDataURL("image/png");

    // 上传图片到服务器
    const networkImgUrl = await uploadImage(base64Img);
    if (networkImgUrl) {
      formData.afterPicUrl = networkImgUrl;
      // $emit('update:modelValue', networkImgUrl);
    }

    // 关闭摄像头
    stop();
  };

  // 关闭摄像头
  const stop = () => {
    let stream = videoDom.value.srcObject;
    if (!stream) return;
    let tracks = stream.getTracks();
    tracks.forEach((x) => {
      x.stop();
    });
  };

  // 打开摄像头
  onMounted(() => {
    openCamera();
  });
</script>
<style scoped lang="scss">
  .face_content {
    width: 1220px;
    height: 100vh;
    padding: 0;
    margin: 0;
  }

  .face_left {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

    .face_img_box {
      position: relative;
      display: flex;
      width: 100%;
      height: 500px;
      justify-content: center;
      align-items: center;

      .upload-image_after,
      .upload-image_before {
        width: 543px;
        height: 500px;
        background-color: transparent !important;
      }
    }

    .face_select_box {
      width: 640px;

      .select_box {
        display: flex;
        width: 100%;
        height: 0;
        height: auto;
        overflow: hidden;
        transition: all 0.3s;
        flex-wrap: wrap;
        gap: 8px;

        .option_btn {
          width: 104px;
          height: 36px;
          margin: 10px 8px 6px;
        }
      }
    }

    .face_upload_box {
      display: flex;
      width: 100%;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 20px;

      .select_btn {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;

        .submit_btn_box {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }

    .face_left_tip {
      width: 640px;
      margin: auto;
      margin-top: 20px;
      font-size: 16px;
      line-height: 22px;
      color: #3e4a54;
    }
  }

  .custom-btn {
    color: var(--el-color-primary);
    background-color: white;
    border-color: var(--el-color-primary);

    &:hover {
      color: var(--el-color-primary);
      background-color: var(--el-color-primary-light-9);
      border-color: var(--el-color-primary);
    }
  }

  .el-button+.el-button {
    margin-left: 0;
  }

  .face_right {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

    .face_right_tips {
      padding: 0 60px 0 30px;
      font-size: 14px;
      line-height: 20px;
      color: #ff3131;
    }

    .face_right_content {
      width: 100%;
      height: 100%;

      .container {
        width: 100%;
        height: 750px;
        padding: 20px;
        overflow-y: auto;
        font-family: "Microsoft YaHei", sans-serif;
        font-size: 14px;
        color: #333;
        background-color: white;
      }

      .report-content {
        width: 100%;
      }

      .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 6px 0;
      }

      .label {
        color: #333;
      }

      .sub-label {
        color: #888;
      }

      .value {
        color: #333;
      }

      .blue {
        color: #1a75ff;
      }

      .section-title {
        margin: 16px 0 8px;
        font-size: 16px;
        font-weight: bold;
      }

      .sub-section {
        margin-top: 12px;
        font-size: 14px;
        font-style: italic;
        color: #888;
      }

      .padding_20 {
        padding-left: 20px;
      }

      .icon {
        width: 16px;
        height: 16px;
        margin-left: 6px;
        cursor: pointer;
      }
    }
  }

  //拍照

  .camera_video {
    width: 100%;
    height: 100%;

    /* 移除边框 */
    border: none;

    /* 确保视频内容填满容器 */
    object-fit: cover;
  }

  .divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 100%;

    /* 分割线宽度 */
    background-color: white;

    /* 分割线颜色 */
    transform: translateX(-50%);
    box-shadow: 0 0 5px rgb(0 0 0 / 50%);

    /* 添加阴影，增强视觉效果 */
  }
</style>
